<template>
    <h3>工程项目的错误和静态资源处理</h3>
    <h4>工程项目的错误</h4>
    <pre class="note">
        1、系统控制台（cmd）：编译时出现的编译和运行错误（多数都会被映射到HTML页面上）
            => 启动时的环境错误
                <img src="@/assets/error/04.png" alt="" srcset="">
            => 运行时的编译错误（编译错误，语法校验错误-eslint）=> 映射大到HTML页面的
                + 语法校验错误-eslint
                <img src="@/assets/error/05.png" alt="" srcset="">
                + 编译错误
                <img src="@/assets/error/06.png" alt="" srcset="">
        2、服务器的HTML页面 ：编译时出现的错误和程序运行时的其它错误
            => 运行时的编译错误（编译错误，语法校验错误-eslint）=> 映射大到HTML页面的
                + 语法校验错误-eslint
                <img src="@/assets/error/07.png" alt="" srcset="">
                + 编译错误
                <img src="@/assets/error/08.png" alt="" srcset="">
        3、运行过程中出错，浏览器的控制台（不清空的累计错误）
            => 程序运行状态的业务或语法错误
                + 语法使用错误（vue，elementUI,……）
                <img src="@/assets/error/09.png" alt="" srcset="">
                + 业务逻辑错误
                <img src="@/assets/error/10.png" alt="" srcset="">
        </pre>
    <p>msg:{{ msg }}</p>
    <input type="button" value="打印数据" @click="printInfo()">

    <hr>

    <h4>静态资源处理</h4>
    <h5>静态资源加载</h5>
    <pre class="note">
        + vue模块化项目的静态资源，除非特殊要求，一般存放于 src/asstes 目录
        + vue模块项目的路径别名 @/ 指向 src/ 目录
        + JS文件资源
            - vue模块化项目中，通过在main.js文件中，作为模块进行加载
            - 加载的JS静态资源会被打包合并到一个固定统一的JS文件中提供html页面使用
        + css样式资源（font 资源）
            - vue模块化项目中，通过在main.js文件中，作为模块进行加载
            - 加载的CSS静态资源，会被整合成html独立样式表使用
        + 图片，视频、音频……
        <img src="@/assets/error/11.png" alt="" srcset="">
        <img src="@/assets/error/12.png" alt="" srcset="">
        <img src="@/assets/error/13.png" alt="" srcset="">
    </pre>
    <br>
    <h5>静态资源的路径处理(以图片资源为例)</h5>
    <pre class="note">
    参与编译过程的图片资源路径 = (在编译过程中会根据 组件的位置 寻找图片，编译后会进行路径重置)
        - ＜img＞ src="" 方式加载的相对路径图片
        <img src="@/assets/error/14.png" alt="" srcset="">
        - 单文件组件中 style 标签定义的 css 样式加载的相对路径图片
        <img src="@/assets/error/15.png" alt="" srcset="">
        - 以模块语法方式加载的相对路径图片
        <img src="@/assets/error/16.png" style="width:400px;">

    不参与编译过程的图片资源路径
        - 以http协议定义的绝对网络路径图片
        <img src="@/assets/error/17.png" alt="" srcset="">
        - 单文件组件中，标签==行内样式==中加载的图片
            => 此时为保证相对路径图片可以正常加载，图片地址以 index.html 文件作为参考定义(不建议)
        <img src="@/assets/error/18.png" alt="" srcset="">
            => 以JS模块方式加载的图片资源，并构建成当前vue实例的仓库变量，完成样式的页面绑定
        <img src="@/assets/error/19.png" alt="" srcset="">
            => 在页面模板的vue语法环境下，通过直接调用require加载方法，完后静态资源的导入(建议)
        <img src="@/assets/error/20.png" alt="" srcset="">
        - 单文件组件中以vue语法方式绑定的变量，取值相对路径图片时
            => 仓库数据属于生产业务数据，不属于开发需要编译的范围
    </pre>
    <img src="@/assets/1.jpg" style="width:100px;height: 100px;"> <br>

    <div class="bg-img"></div>

    <img src="https://www.baidu.com/img/pcdoodle_2a77789e1a67227122be09c5be16fe46.png" style="width:100px;height: 100px;">

    <div class="bg-img1" style="background-image: url('@/assets/1.jpg');"></div>
    <div class="bg-img1" style="background-image: url('./img/1.jpg');"></div>
    <div class="bg-img1" :style="`background-image: url(${ img });`"></div>
    <div class="bg-img1" :style="`background-image: url(${ require('@/assets/1.jpg') });`"></div>
    <br>

    <img :src="path" style="width:100px;height: 100px;"> 

</template>

<script>

// import aa from "aaaaaa";
import img from "@/assets/1.jpg";
// console.log( img )

export default {
    data() {
        return {
            msg: "注释报错",
            img:img,
            path:"@/assets/1.jpg"
        }
    },
    methods: {
        printInfo() {
            console.log(this.aaa.bbb)
        }
    },
}
</script>

<style>
.bg-img{
    width: 100px;
    height: 100px;
    background-image: url("@/assets/1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
}
.bg-img1{
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    background-color: #dedede;
}
</style>